<template>
<el-dialog :visible.sync="visible" :title="dataForm.details ? '详情' :(!dataForm.id ? $t('add') : $t('update'))" :close-on-click-modal="false" :close-on-press-escape="false">
    <el-form class="" :model="dataForm" ref="dataForm" :rules="dataRule" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '140px' : '130px'">
        <el-row>
            <el-col :span="12">
                <el-form-item label="所在码头" prop="wharfId">
                    <el-select v-model="dataForm.wharfId" placeholder="所在码头" clearable style="width:100%">
                        <el-option :value="item.id" v-for="item in options" :key="item.id" :label="item.wharfName">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="车牌号" prop="numberplate">
                    <el-input v-model="dataForm.numberplate" placeholder="车牌号"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="司机姓名" prop="driverName">
                    <el-input v-model="dataForm.driverName" placeholder="司机姓名"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="备注" prop="remark">
                    <el-input v-model="dataForm.remark" placeholder="备注"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="进入码头时间" prop="enterTime">
                    <el-date-picker style="width:100%" value-format="yyyy-MM-dd HH:mm:ss" v-model="dataForm.enterTime" type="datetime" placeholder="进入码头时间">
                    </el-date-picker>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="离开码头时间" prop="leaveTime">
                    <el-date-picker style="width:100%" value-format="yyyy-MM-dd HH:mm:ss" v-model="dataForm.leaveTime" type="datetime" placeholder="离开码头时间">
                    </el-date-picker>
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>
    <template slot="footer">
        <el-button @click="visible = false">{{ $t("cancel") }}</el-button>
        <el-button type="primary" @click="dataFormSubmitHandle()">{{
        $t("confirm")
      }}</el-button>
    </template>
</el-dialog>
</template>

<script>
import Cookies from "js-cookie";
import debounce from "lodash/debounce";
export default {
    data() {
        return {
            visible: false,
            options: [], //码头
            dataForm: {
                id: '',
                "carDetails": "",
                "driverName": "",
                "enterTime": "",
                "leaveTime": "",
                "numberplate": "",
                "remark": "",
                "wharfId": '',
            },
            dataRule: {
                numberplate: [{
                    required: true,
                    message: this.$t("validate.required"),
                    trigger: 'blur'
                }],
                wharfId: [{
                    required: true,
                    message: this.$t("validate.required"),
                    trigger: 'blur'
                }],
                enterTime: [{
                    required: true,
                    message: this.$t("validate.required"),
                    trigger: 'blur'
                }],
                leaveTime: [{
                    required: true,
                    message: this.$t("validate.required"),
                    trigger: 'blur'
                }]
            }
        };
    },
    created(){
       
    },
    methods: {
        init() {
            this.visible = true;
             this.getOption();
            this.$nextTick(() => {
                this.$refs["dataForm"].resetFields();
                if (this.dataForm.id) {
                    this.getInfo();
                }
            });
        },
        getOption() {
            this.$http
                .get("/travel/car/wharfGeneralWharfIntel/page",{
                    params:{
                        page:1,
                        limit:100
                    }
                })
                .then(({
                    data: res
                }) => {
                    if (res.code == 0) {
                        this.options=res.data.list;
                    }
                })
        },
        // 获取信息
        getInfo() {
            this.$http
                .get("/travel/car/wharfGeneralRecord/" + this.dataForm.id)
                .then(({
                    data: res
                }) => {
                    if (res.code !== 0) {
                        return this.$message.error(res.msg);
                    }
                    this.dataForm = {
                        ...this.dataForm,
                        ...res.data,
                    };
                    // 图片处理
                })
                .catch(() => {});
        },
        // 表单提交
        dataFormSubmitHandle: debounce(
            function () {
                this.$refs["dataForm"].validate((valid) => {
                    if (!valid) {
                        return false;
                    }
                    this.$http[!this.dataForm.id ? "post" : "put"](
                            "/travel/car/wharfGeneralRecord",
                            this.dataForm
                        )
                        .then(({
                            data: res
                        }) => {
                            if (res.code !== 0) {
                                return this.$message.error(res.msg);
                            }
                            this.$message({
                                message: this.$t("prompt.success"),
                                type: "success",
                                duration: 500,
                                onClose: () => {
                                    this.visible = false;
                                    this.$emit("refreshDataList");
                                },
                            });
                        })
                        .catch(() => {});
                });
            },
            1000, {
                leading: true,
                trailing: false
            }
        ),
    },
};
</script>
